<template>
  <VanSpace direction="vertical" fill>
    <van-field v-model="myUserLoginStoreStore.phone" name="phone" label="" :placeholder="phone" type='text' required
      :rules="[{ required: true, pattern: phonePattern, message: phoneError, }]" class="rounded-xl" maxlength="11"
      clearable />
    <van-field v-model="myUserLoginStoreStore.code" center clearable label="" :placeholder="phoneCode"
      class="rounded-xl" :rules="[{ required: true, message: phoneCode, }]" maxlength="6">
      <template #button>
        <van-button size="small" type="primary" block @click="sendPhoneCodeAction">
          {{ sendPhoneCode }}
        </van-button>
      </template>
    </van-field>
  </VanSpace>
</template>

<script lang="ts" setup>
const myUserLoginStoreStore = useMyUserLoginStoreStore()
// 手机号正则 11位数字
const phonePattern = /(13[0-9]|14[579]|15[012356789]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}/

// 相关显示的信息显示
const phone: string = localesGetValueForKey("placeholder.phone", "请输入用户手机号") as string;
const phoneError: string = localesGetValueForKey("phoneRegexError", "请输入正确的手机号") as string;
const phoneCode: string = localesGetValueForKey("placeholder.phoneCode", "请输入手机验证码") as string;
const sendPhoneCode = localesGetValueForKey("placeholder.sendPhoneCode", "发送验证码") as string;

// 发送验证码 500ms 防抖
const sendPhoneCodeAction = useLodashDebounce(() => {
  if (!phonePattern.test(myUserLoginStoreStore.phone as string)) {
    showFailToast(phoneError)
    return;
  }
  useSendPhoneCode(myUserLoginStoreStore.phone)
}, 500)
</script>
